<!-- 转移部门 -->
<template>
	<el-dialog
		:close-on-click-modal="false"
		:close-on-press-escape="true"
		title="转移组织"
		v-model="isVisible"
		destroy-on-close
		width="400px"
		:align-center="true"
		@close="close"
	>
		<div class="formBox">
			<el-form ref="ruleFormRef" :model="form" label-position="left" :rules="rules">
				<el-form-item label="所属组织" props="deptId">
					<el-tree-select
						v-model.number="form.deptId"
						:data="treeData"
						style="width: 100%"
						:props="{
							value: 'deptId',
							children: 'children',
							label: 'deptName',
						}"
						default-expand-all
						check-strictly
						:render-after-expand="false"
						emptyText="no data"
						@node-click="handleNodeClick"
					/>
				</el-form-item>
			</el-form>
		</div>
		<template #footer>
			<div class="dialog-footer">
				<el-button plain type="warning" @click="close"> 取消 </el-button>
				<el-button plain type="primary" @click="submit(ruleFormRef)"> 确定 </el-button>
			</div>
		</template>
	</el-dialog>
</template>

<script lang="ts">
import { reactive, onMounted, ref, computed, onBeforeUnmount, onUnmounted, watch, defineComponent, defineProps, defineEmits } from 'vue';
import { ElMessage, ElMessageBox, FormInstance, FormRules } from 'element-plus';
import { shallowRef } from 'vue';
import communityApi from '/@/api/smoke/community';
const ruleFormRef = ref<FormInstance>();

export default defineComponent({
	name: 'deptMove',
	props: {
		dialogVisible: {
			type: Boolean,
			default: false,
		},

		treeData: {
			type: Array,
			default: function () {
				return [];
			},
		},
	},
	setup(prop, { emit }) {
		// data
		const state = reactive({
			form: {
				id: '',
				deptId: '',
				deptName: '',
			},
			rules: {
				deptId: [{ required: true, message: '必选', trigger: 'change' }],
			},
		});

		const isVisible = computed(() => {
			return prop.dialogVisible;
		});

		// 节点单击事件
		const handleNodeClick = (data1: any) => {
			state.form.deptName = data1.deptName;
		};

		// 对话框关闭
		function close() {
			emit('close');
			ruleFormRef.value?.resetFields();
		}

		// 修改
		function update() {
			communityApi.updateCommunity(state.form).then((res) => {
				ElMessage.success('更新成功');
				emit('success');
				ruleFormRef.value?.resetFields();
			});
		}

		async function submit(formEl: FormInstance | undefined) {
			if (!formEl) return;
			await formEl.validate((valid, fields) => {
				if (valid) {
					update();
				} else {
					console.log('error submit!', fields);
				}
			});
		}

		onMounted(() => {});

		return {
			ruleFormRef,
			isVisible,
			submit,
			handleNodeClick,
			close,
			...state,
		};
	},
});
</script>
